<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button
                style="float: right"
                @click="handleSearchList()"
                type="primary"
                size="small">
                查询结果
                </el-button>
                <el-button
                style="float: right;margin-right: 15px"
                @click="handleResetSearch()"
                size="small">
                重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="关键字：">
                        <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="商品编号，商品名称"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="productTable"
                        :data="list"
                        style="width: 100%"
                        v-loading="listLoading"
                        border>
                <el-table-column label="编号" width="100" align="center">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="缩略图" width="120" align="center">
                    <template slot-scope="scope"><img style="height: 80px" :src="scope.row.goodsImg || ''"></template>
                </el-table-column>
                <el-table-column label="商品名称" align="center">
                    <template slot-scope="scope">{{ scope.row.goodsName }}</template>
                </el-table-column>
                <el-table-column label="属性" width="80" align="center">
                    <template slot-scope="scope">{{ scope.row.goodsAttr }}</template>
                </el-table-column>
                <el-table-column label="分类" width="120" align="center">
                    <template slot-scope="scope">{{ scope.row.goodsCategory }}</template>
                </el-table-column>
                <el-table-column label="售价" width="100" align="center">
                    <template slot-scope="scope">{{ scope.row.price }}</template>
                </el-table-column>
                <el-table-column label="库存" width="120" align="center">
                    <template slot-scope="scope">{{ scope.row.stock }}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery.pageSize"
                :page-sizes="[5,10,15]"
                :current-page.sync="listQuery.pageNum"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
const defaultListQuery = {
    keyword: null,
    pageNum: 1,
    pageSize: 5,
}
import { getStockout } from '@/api/product'
export default {
    data() {
        return {
            listQuery: Object.assign({}, defaultListQuery),
            listLoading: true,
            list: [],
            total: 0,
        }
    },
    created() {
      this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true;
            getStockout(this.listQuery).then(response => {
                console.log(response)
                this.listLoading = false;
                this.list = response.data.recordList;
                this.total = response.data.total;
            });
        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleResetSearch() {
            this.listQuery = Object.assign({}, defaultListQuery);
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
    }
}
</script>

<style>

</style>